<template>
    <div class="content-import">
        <Card shadow>
        	<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
        		<Row class="top">
        			<Col :xs="14" :sm="14" :md="14" :lg="14" class="right">
				        <FormItem label="题目题型：" prop="select">
				            <span>下载Excel模板文件</span><a href="http://www.lijiaming.top/ApiAdmin/public/static/Subject.xlsx">下载</a>
				        </FormItem>
			        </Col>
		        </Row>
		        <Row class="ueditor">
		        	<Col :xs="18" :sm="18" :md="18" :lg="18" class="right">
		        		<FormItem label="知识点：" prop="knowledge">
		        			<p>上传Excel文件</p>
		        			<Upload  :on-format-error='handleFormatError' :on-success="handleSuccess" :format="['xlsx','csv']" ref="upload" :before-upload="handleUpload" action="http://localhost/aq/ApiAdmin/public/index.php/admin/Subject/uploadExcel" name="file">
						        <Input v-model="formValidate.knowledge" placeholder="选择Excel文件上传" disabled="disabled"></Input>
						        <Button>上传</Button>
						    </Upload>
				        </FormItem>
		        	</Col>
		        </Row>
		        <Row class="top">
        			<Col :xs="14" :sm="14" :md="14" :lg="14" class="right">
				        <FormItem>
				            <Button type="primary" @click="handleSubmit('formValidate')" :loading="loadingStatus" style="margin-right: 50px">确认上传</Button>
				            <router-link :to="{name:'subject-management'}"> 
				            	<Button type="ghost">取消</Button>
				            </router-link>
				        </FormItem>
			        </Col>
		        </Row>
		    </Form>
        </Card>
    </div>
</template>
<script>
import Cookies from 'js-cookie';
import { router } from '@/router/index.js';
import $store from '@/store/index.js';
import Vue from 'vue';
var $vue=new Vue();
export default {
    data() {
        return {
        	file: null,
            loadingStatus: false,
        	forbidden:true,
        	text:'未选择文件',
        	uploadList:[],
            formValidate: {
                knowledge:''
            },
            ruleValidate: {
                knowledge:[
                    { required: true, message: '未选择文件', trigger: 'blur' }
                ]
            },
        }
    },
    methods: {
    	//上传文件格式验证失败(默认不会上传文件)
    	handleFormatError (file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件' + file.name + '格式不正确，请上传xlsx格式'
            });
        },
        handleSubmit (name) {
			//验证整个表单
            this.$refs[name].validate((valid) => {
                if (valid) {
                	//上传文件(会根据验证文件格式进入验证失败和验证成功的函数)
                    this.$refs.upload.post(this.file);
                } else {
                    this.$Message.error(this.text);
                }
            });
        },
        //上传文件验证格式成功的函数
        handleSuccess(){
        	this.$Message.success('上传成功')       	
            this.$router.push({
            	name:'subject-management'
            })    
        },
        //中止选择文件后自动上传
        handleUpload (file) {
            this.file = file;
            this.formValidate.knowledge='上传的文件：'+file.name
          	return false;
        },
   	}
};
</script>
<style>
	.content-import .ivu-input[disabled], fieldset[disabled] .ivu-input{background-color:#fff;color: #000;}
	.content-import .ivu-input-wrapper{width: 500px;}
	.content-import .ivu-upload{width: 600px;}
	.content-import .reference{width: 100%;}
	.content-import .ivu-radio-wrapper{margin-right: 50px;}
	.content-import .operation{padding: 8px 12px 10px 0;}
	.content-import .explain{width: 576px;}
	.content-import .ivu-select-dropdown{z-index: 100000;}
</style>